//原生css变量：类似sass/less等工具
// 语法：--变量名（可以以-分割）：css变量的值
// 使用：var(传入组件名)
// 1.全局方式=>:root{}
// 2.局部方式=>.xxx{}
@import '@/styles/hairline.scss';
:root {
  --geek-main-color: red;
  --geet-font-seze: 20px;
}
.mainColor {
  color: var(--geek-main-color);
  font-size: var(--geet-font-seze);
}
.vcss {
  --local-color: pink;
  color: var(--local-color);
}
.txt {
  //读取不到  --local-color变量的值
  color: var(--local-color);
}
.box {
  width: 100px;
  height: 60px;
  font-size: 20px;
  background-color: aqua;
}
.one {
  margin: 20px;
  .top {
    border-bottom: 1px solid red;
  }
  .btm {
    border-top: 1px solid green;
    position: relative;
    @include hairline(bottom, #f0f0f0);
  }
}
.bicon {
  font-size: 60px;
}
